<template lang="html">
  <div class="cart">
    <div class="cart-header">
      购物车
    </div>
    <div class="show-cart" v-if="cartGetters.length > 0">
      <div class="user-info">
        <div class="user-l">
          <p>收货人</p>
          <p>电话</p>
          <p>收货地址</p>
        </div>
        <div class="user-phone">
          <p>李瑞 先生</p>
          <p>13309594252</p>
          <p>北京市南店新村</p>
        </div>
        <div class="revise">
          修改 >
        </div>
      </div>
      <div class="goods-list" v-for="(item,index) in cartGetters">
        <div class="check-btn">&nbsp;</div>
        <div class="good-img">
          <img :src="item.good.img" alt="">
        </div>
        <div class="good-info">
          <div class="good-top">{{ item.good.name }}</div>
          <div class="good-bottom">
            <p class="good-price">￥ {{ item.good.price }}</p> 
            <div class="good-num">
              <span @click="minClick(item.good.id)">-</span> 
              {{ item.num }}
              <span @click="addClick(item.good)">+</span>
            </div>
          </div>
        </div>
      </div>
      <div class="good-sum">
        总价 ： ￥ {{ cartGoodSum }}
      </div>
    </div>
    <div class="empty-cart" v-else>
      <div class="icon">
        <i class="iconfont icon-dingwei"></i>
      </div>
      <p>购物车空空如也耶~</p>
      <router-link tag="div" to="/home" class="go-home">去逛逛吧</router-link>
    </div>
    <FooterNav />
  </div>
</template>

<script>

import FooterNav from '../components/footNav'
import { mapGetters,mapActions } from "vuex"

export default {
    name: 'Cart',
    data(){
        return {
          
        }
    },
    computed:{
      ...mapGetters({
        cartGetters:'cart/cartProducts',
        cartGoodSum:'cart/cartGoodSum'
      })
    },
    mounted(){
      
    },
    components:{
      FooterNav
    },
    methods:{
      ...mapActions(['cart/minusProductToCart','cart/addProductToCart']),
      minClick(goodid){
        this['cart/minusProductToCart'](goodid)
      },
      addClick(data){
        this['cart/addProductToCart'](data);
      }
    }
}
</script>

<style lang="less" scoped>
  .cart{
    margin-bottom: 1.4rem;
    .cart-header{
      width: 100%;
      height: 1.1rem;
      line-height: 1.1rem;
      text-align: center;
      background: #f9fafd;
      border-bottom: 1px solid #e0e0e0;
    }
    .show-cart{
      .user-info{
        width: 100%;
        height: 2.4rem;
        background: #fff;
        background-image: url("../assets/images/border.png");
        background-repeat: repeat-x;
        background-position: left top ,right bottom;
        background-size: auto 0.1rem;
        margin-bottom: 0.2rem;
        .user-l,.user-phone{
          float: left;
          height: 100%;
          padding: 0 0.2rem;
          p{
            height: 0.8rem;
            line-height: 0.8rem;
          }
        }
        .revise{
          padding: 0 0.3rem;
          float: right;
          line-height: 2.4rem;
        }
      }
      .goods-list{
        padding: 0.3rem;
        background: #fff;
        overflow: hidden;
        border-bottom: 1px solid #999;
        .check-btn{
          width: 0.6rem;
          height: 100%;
          float: left;
        }
        .good-img{
          width: 1.2rem;
          float: left;
        }
        .good-info{
          float: left;
          padding-left: 0.2rem;
          width: 70%;
          div{
            padding: 0.2rem 0;
          }
          .good-price{
            float: left;
          }
          .good-bottom{
            overflow: hidden;
            .good-num{
              float: right;
              padding: 0;
              span{
                width: 0.6rem;
                height: 0.6rem;
                line-height: 0.6rem;
                text-align: center;
                display: inline-block;
                border: 1px solid #ffbe89;
                border-radius: 50%;
                font-size: 0.6rem;
                margin: 0 0.2rem;
                color: red;
              }
            }
          }
        }
      }
      .good-sum{
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        background: #fff;
        width: 100%;
        color: red;
        border-bottom: 1px solid #999;
      }
    }
    .empty-cart{
      width: 100%;
      padding-top: 3rem;
      .icon{
        width: 1.2rem;
        height: 1.2rem;
        background: #ffd600;
        border-radius: 50%;
        text-align: center;
        line-height: 1.2rem;
        margin: 0 auto;
        i{
          font-size: 0.6rem;
          color: #fff;
        }
      }
      p{
        text-align: center;
        padding: 0.2rem;
        color: #999;
      }
      .go-home{
        text-align: center;
        width: 2rem;
        padding: 0.1rem 0.2rem;
        border: 1px solid #999;
        color: #999;
        margin: 0 auto;
      }
    }
  }
</style>
